<template>
  <div class="container">
      <p>X 轴：{{ x }} Y 轴：{{ y }}</p>
      <hr />
      <div>
          <p>{{ count }}</p>
          <button @click="add()">自增</button>
      </div>
  </div>
</template>
<script>
  import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
  export default {
      name: 'App',
      setup() {
          // !#Fn1
          const mouse = reactive({
              x: 0,
              y: 0,
          })
          const move = (e) => {
              mouse.x = e.pageX
              mouse.y = e.pageY
          }
          onMounted(() => {
              document.addEventListener('mousemove', move)
          })
          onUnmounted(() => {
              document.removeEventListener('mousemove', move)
          })
          

          // ?Fn2
          const count = ref(0)
          const add = () => {
              count.value++
          }

          // 统一返回数据供模板使用
          return {
              ...toRefs(mouse),
              count,
              add,
          }
      },
  }
</script>